<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Goods Page</h1>
    <form th:action="@{/goods/doSelecteGoods}" method="get">
        <input type="text" name="name"/>
        <input type="submit" value="查询"/>
        <input type="button" value="商品添加" onclick="doLoadGoodsAddUI()"/>
    </form>
   <!--<a th:href="@{/goods/doGoodsAddUI}">添加商品</a>-->

    <table>
        <!--/* 定义表头部分 */-->
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
        </tr>
        </thead>
        <!--/* 定义表体部分 */-->
        <tbody>
        <!--/* th:each 为thymeleaf中定义的迭代标签属性,需要循环创建哪些元素,th:each就写到哪个元素内部 */-->
        <tr th:each="g:${list}"><!--/*这里的g表示集合中的一个元素,可以自己起名字*/-->
            <td th:text="${g.id}"></td> <!--/*g.id是访问g指向对象的getId方法*/-->
            <td th:text="${g.name}"></td>
            <td th:text="${g.remark}"></td>
            <td th:text="${#dates.format(g.createdTime,'yyyy/MM/dd HH:mm')}"></td>
            <td><button th:onclick="doDeleteById([[${g.id}]])">delete</button></td>
            <td><button th:onclick="doFindById([[${g.id}]])">update</button></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var rootUrl="http://localhost";
    function  doFindById(id){
        location.href=`${rootUrl}/goods/doFindById/${id}`;
    }
    function doLoadGoodsAddUI(){
        location.href=`${rootUrl}/goods/doGoodsAddUI`;
    }
    function doDeleteById(id){
       location.href=`${rootUrl}/goods/doDeleteById?id=${id}`;

    }
</script>
</body>
</html>